<!--
 * @Description: 
 * @Author: ljl
 * @Date: 2024-11-05 15:30:29
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-06 14:37:27
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网上书城</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

       .header {
            background-color: #f5f5f5;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .n a{
            color: rgba(23, 103, 240, 0.856);
        }

       .nav {
            color: white;
            background-color: #134402;
            padding: 10px;
            display: flex;
            justify-content: center;
        }
        
        .nav a {
            text-align: center;
            padding: 5px 10px;
        }

        .nav s{
            display: flex;
            width: 50%;
            height: 30px;
            position: relative;
            top: 5px;
            left: 510px;
        }

        /* 搜索栏样式 */
        .search-bar {
            display: flex;
            justify-content: flex-end;
            top: 130px;
            right: 15px;
            background-color: rgb(182, 183, 126);
            
        }

        .search-bar button {
            height: 30px;
            border: 1px solid #ccc;
            background-color: #00AB00;
        }

        .s{
            display: flex;
            width: 50%;
            height: 30px;
            position: relative;
            top: 5px;
            left: 68%;
        }

        .main {
            width: 50%;
            height: 100%;
            border: 10px solid #bcca8b;
            padding: 20px;
            margin: 0 auto; /* 水平居中 */
            background-color: #9bb8570a;
        }
        
        #ust{
            background-color: rgb(189, 186, 134);
            width: 96%;
            height: 40px;
            margin: 5px auto;
            border-radius: 10px;
            text-align: left;
            line-height: 40px;
        }
        
        #ust b {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            padding: 10px 10px;
        }

        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .book-item {
            width: 23%;
            margin-bottom: 20px;
            text-align: center;
        }

        .book-item img {
            width: 80%;
            height: 60%;
        }

        .book-info {
            margin-top: 10px;
        }


        .pagination {
             text-align: center;
             margin-top: 20px;
         }

        .footer {
             background-color: #b3d52c23;
             padding: 15px;
             text-align: center;
         }
    </style>
</head>

<body>
    <div class="header">
        <div>网上书城 bookstore.com</div>
        <div class="n">
            <a href="">🛒购物车|</a>
            <a href="">帮助中心|</a>
            <a href="">我的账户|</a>
            <a href="">新用户注册</a>
        </div>
    </div>
    <div class="nav">
        <a href="" style="color: white;">文学</a>
        <a href="" style="color: white;">生活</a>
        <a href="" style="color: white;">计算机</a>
        <a href="" style="color: white;">外语</a>
        <a href="" style="color: white;">经管</a>
        <a href="" style="color: white;">社科</a>
        <a href="" style="color: white;">学术</a>
        <a href="" style="color: white;">少儿</a>
        <a href="" style="color: white;">艺术</a>
        <a href="" style="color: white;">原版</a>
        <a href="" style="color: white;">科技</a>
        <a href="" style="color: white;">考试</a>
        <a href="" style="color: white;">生活百科</a>
        <a href="" style="color: yellow;">全部目录商品</a></div>
    <div class="search-bar">
        <input type="text" placeholder="搜索商品">
        <button>搜索</button>
    </div>
    <div class="s">首页>旅游>图书列表</div>
    <div class="main">
        <div>
            <h4>商品目录</h4><hr>
        </div> 
        <div>
            <h4>计算机类 <samp>共100种商品</h4><hr>
        </div>
    <div id="ust"><b>PRODUCT UST</b></div>
        <div>
            <div class="gallery">
                <div class="book-item">
                    <img src="./img/fish.jpg" alt="" />
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/ngcn.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/oneplant.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/photog.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/subwayinshanghai.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/think.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/travelbook.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
                <div class="book-item">
                    <img src="./img/tripcn.jpg" alt="tupian">
                    <div class="book-info">
                        <p>书名: xxx</p>
                        <p>作者: xxx</p>
                    </div>
                </div>
            </div>
        </div>
    

        <div class="pagination">
            <a href>上一页</a>
            <a href>2</a>
            <a href>3</a>
            <a href>4</a>
            <a href>5</a>
            <a href>6</a>
            <a href>7</a>
            <a href>下一页</a>
            </div>
    </div>
    <div class="footer">网上书城 bookstore.com<br>copyright 2008 ⊗BookStore All Rights RESERVED</div>
</body>

</html>